<template>
	<view>
		<head-title :titleHead="titleHead" @classAttenceConfirm="classAttenceConfirm()"></head-title>
		<view class="leaveMgm" v-for="(item,index) in attArr" :key="index">

			<view style="display: flex;flex-direction: row;">
				<view class="leaveCheck" value="yes" @click="checkFun(item)"></view>
				<view style="width:25%;font-size: 34rpx;margin-top:-10rpx">{{index+1}} {{item.studentName}}</view>
				<view class="attBtn">
					<button @click="attBtnSkip(item,1)"
						:class="[{'attBtnFontSlec':item.attenceStatus=='1'},'attBtnFont']">正常</button>
					<button @click="attBtnSkip(item,2)"
						:class="[{'attBtnFontSlec':item.attenceStatus=='2'},'attBtnFont']">迟到</button>
					<button @click="attBtnSkip(item,3)"
						:class="[{'attBtnFontSlec':item.attenceStatus=='3'},'attBtnFont']">请假</button>
				</view>
			</view>

			<view v-if="attArr.length>index+1" class="attLine"></view>
		</view>

		<view class="bottomBar">
			<view v-for="(item,index) in rulesList" :key="item.id" :class="item.timeSlot == timeSlot ?'check':''"
				@click="switchStatus(item)">
				<view class="iconfont icon-yonghutongji" style="font-size: 50rpx; text-align: center;"></view>
				<view style="text-align: center;">{{item.timeSlotLabel}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import syncButton from "@/pages/component/syncButton.vue"
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import headTitle from '@/pages/component/btnHeadeCom.vue'
	import teacherClass from "@/api/modules/teachClass.js"

	export default {
		name: 'leveRegistration',
		data() {
			return {
				url: "/pages_duty/classTeacher/classCheckWorkAttendance/attendanceRegistration",
				rulesList: [],
				isShow: false,
				userName: '',
				topName: '考勤Y-34',
				titleHead: '考勤状况',
				bottomName: 'moon',
				classId: '',
				className: '',
				timeSlot: '4',
				studentStatusArr: [],
				studentNoArr: [],
				typeList: ['正常', '迟到', '请假'],
				attArr: [{
						student: '欧阳修',
						dormitoryNum: '202宿舍',
						typeList: [{
							type: "正常",
							isShow: false,
						}, {
							type: "迟到",
							isShow: false,
						}, {
							type: "请假",
							isShow: false,
						}],
						isShow: false,
						time: '请假时间',
					},
					{
						student: '范增',
						dormitoryNum: '202宿舍',
						isShow: false,
						typeList: [{
							type: "正常",
							isShow: false,
						}, {
							type: "迟到",
							isShow: false,
						}, {
							type: "请假",
							isShow: false,
						}],
						time: '请假时间',
					},
					{
						student: '杜甫',
						isShow: false,
						typeList: [{
							type: "正常",
							isShow: false,
						}, {
							type: "迟到",
							isShow: false,
						}, {
							type: "请假",
							isShow: false,
						}],
						dormitoryNum: '202宿舍',
						time: '请假时间',
					},
					{
						student: '李白',
						typeList: [{
							type: "正常",
							isShow: false,
						}, {
							type: "迟到",
							isShow: false,
						}, {
							type: "请假",
							isShow: false,
						}],
						isShow: false,
						dormitoryNum: '202宿舍',
						time: '请假时间',
					}
				],
				attendanceArr: [{
						name: 'moring',
						icon: 'iconfont icon-yonghutongji',
						text: "上午",
						path: '/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus'
					},
					{
						name: 'moon',
						icon: 'iconfont icon-yonghutongji',
						text: "下午",
						path: '/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus1'
					},
					{
						name: 'night',
						icon: 'iconfont icon-yonghutongji',
						text: "晚上",
						path: '/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus2'
					},
				],
				isDutyType: '',
				isDuty: 0,
			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle,
			syncButton,
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.userName = res.data
				}
			})
			uni.getStorage({
				key: "isDuty",
				success(res) {
					that.isDuty = res.data
				}
			})
		},
		onLoad(options) {
			this.classId = options.classId
			this.className = options.className
			this.isDutyType = options.type
			this.tecClassAttence()
			teacherClass.getClassInfo(options.classId).then(res => {
				this.rulesList = res.data.rulesList

			})
			console.log("timeSlot:", this.timeSlot)
		},
		methods: {
			classAttenceConfirm() {
				this.studentNoArr = []
				this.studentStatusArr = []
				for (let var1 in this.attArr) {
					if (this.attArr[var1].attenceStatus) {
						this.studentStatusArr.push(this.attArr[var1].attenceStatus)
						this.studentNoArr.push(this.attArr[var1].studentNo)
					} else {
						this.studentStatusArr.push(1)
						this.studentNoArr.push(this.attArr[var1].studentNo)
					}
				}
				if (this.studentStatusArr[0] != null) {
					uni.showLoading({
						title: "",
						mask: true
					})
					this.$api.teacher.createClassAttence(this.$date, this.classId, this.studentStatusArr, this
						.studentNoArr, this.timeSlot, this.userName, this.isDuty).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: "考勤提交成功"
						})
						if (this.isDutyType) {
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages_main/dutyCheckWorkAttendance/dutyAttendanceNightList'
								})
							}, 500)
						} else {
              this.goBack(500)
						}
					}).catch(e => {
						console.log(e)
					})
				} else {
					uni.showToast({
						title: '至少选一条记录',
						icon: 'none'
					})
				}

			},
			leaveIndexSkip(item) {
				uni.navigateTo({
					// url: '/pages/leave/leaveManagement',
					// success: res => {},
					// fail: () => {},
					// complete: () => {}
				});
			},
			tecClassAttence() {
				this.$api.teacher.tecClassAttence(this.$date, this.timeSlot, this.classId).then(res => {
					this.attArr = res.data
				}).catch(e => {

				})
			},
			attBtnSkip(item, status) {
				//status 1 正常  2 迟到  3 请假
				if (status == '1') {
					this.$set(item, "attenceStatus", 1)
				} else if (status == '2') {
					this.$set(item, "attenceStatus", 2)
				} else if (status == '3') {
					this.$set(item, "attenceStatus", 3)
				}
			},
			checkFun(item) {

			},
			switchStatus(item) {
				if (item.timeSlot == "4") {
					uni.redirectTo({
						url: `/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus1?classId=${this.classId}&className=${this.className}`
					})
				} else if (item.timeSlot == "1") {
					uni.redirectTo({
						url: `/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus2?classId=${this.classId}&className=${this.className}`
					})
				} else if (item.timeSlot == "2") {
					uni.redirectTo({
						url: `/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus3?classId=${this.classId}&className=${this.className}`
					})
				} else if (item.timeSlot == "3") {
					uni.redirectTo({
						url: `/pages_duty/classTeacher/classCheckWorkAttendance/attendanceStatus4?classId=${this.classId}&className=${this.className}`
					})
				}

			},
		}
	}
</script>

<style>
	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 30rpx;
		color: white;
		background-color: #007AFF;
		padding: 0 20rpx !important
	}

	.attBtnFont {
		border: solid #808080 0rpx !important;
		;
		font-size: 30rpx;
		padding: 0 20rpx !important
	}

	.attLine {
		width: 720upx;
		height: 3upx;
		background: rgba(239, 237, 236, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -6rpx;
		left: 0rpx;
	}

	.attBtn {
		width: 55%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: -20upx;

	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 20rpx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
		margin-top: 30rpx
	}

	.leaveCheck {
		margin-left: 50rpx;
		/* margin-bottom: 60rpx;		 */
	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}

	.bottomBar {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
	}

	.check {
		color: blue;
	}
</style>
